<template>
	<!-- 公告通知 -->
	<view class="">
		<view class="ad" >
		    <!-- <view class="tctt" style="color:{{diy.gg.zztcolor}};background:{{diy.gg.zbjcolor}};">{{diy.gg.zgg}}</view> -->
		    <view class="tctt">公告通知</view>
		
		    <swiper autoplay="true" circular="true" class="ad1 newest_content gobyndsingle" interval="3000" style="background-color:#ffffff" vertical="true">
		        <swiper-item v-for="(item,index) in informList" :key="index">
		            <view  class="adinfo gobyndsingle" :data-id="item.id" style="color:#E91E63;">
		                        {{item.txt}}
		             </view>
		        </swiper-item>
		
		<!-- 
		        <swiper-item >
		            <view @tap="notice" class="adinfo gobyndsingle"  style="color: #E91E63;">
		                        {{item.title}}
		                    </view>
		        </swiper-item> -->
		    </swiper>
		</view>

	</view>
</template>

<script>
	export default {
		props:{
			informList:{
				type:Array,
				default:()=>[]
			}
		},
		data(){
			return {
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.ad {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    margin: 0 12rpx;
	}
	
	.tctt {
	    font-weight: bolder;
	    width: 23vw;
	    height: 8vw;
	    line-height: 8vw;
	    border-radius: 8vw 0 0 8vw;
	    text-align: center;
	    font-size: 28rpx;
	    color: #E91E63;
	    background: -webkit-linear-gradient(left,rgb(255,255,255),rgb(255,255,255));
	}
	
	.ad1 {
	    width: 100%;
	    background-color: #fff;
	    border-radius: 0 20rpx 20rpx 0;
	    overflow: hidden;
	    margin: 12rpx;
	}
	
	.newest_content {
	    flex: 1;
	    height: 60rpx;
	    float: left;
	    line-height: 60rpx;
	    font-size: 28rpx;
	    color: #333;
	}
	
	.gobyndsingle {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	
	.adinfo {
	    font-size: 26rpx;
	    font-weight: bolder;
	    text-indent: 2mm;
	    width: 100%;
	    background-clip: text;
	    color: #E91E63;
	}
	
	.adinfo rich-text {
	    width: 100%;
	}
	
	.swiper {
	    margin: 0 auto;
	    width: 686rpx;
	    height: 330rpx;
	}
	
	.huandeng {
	    height: 330rpx;
	    width: 750rpx;
	    background: linear-gradient(180deg,#ff7984,#ff7199 10%,rgba(255,214,41,.01) 40%);
	}
	
	.swiper-box {
	    width: 686rpx;
	    height: 330rpx;
	    border-radius: 20rpx;
	}
	
	.swiper-box image {
	    width: 100%;
	    height: 100%;
	    border-radius: 20rpx;
	}
	
	.swiper-box2 {
	    width: 100%;
	    height: 100%;
	    border-radius: 20rpx;
	}
	
	.scrolltop {
	    width: 100%;
	    height: 100%;
	    padding-bottom: 15%;
	}
	
	.zanniu {
	    min-height: 30px;
	    width: 30%;
	    margin-top: 10px;
	    border-width: 1px;
	    border-style: solid;
	    border-color: rgb(255,203,170);
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    border-radius: 30px;
	    border-bottom-right-radius: 30px;
	    border-bottom-left-radius: 30px;
	    border-top-right-radius: 30px;
	    border-top-left-radius: 30px;
	    position: absolute;
	    top: 60%;
	    left: 15%;
	}
	
	.yanniu {
	    min-height: 30px;
	    width: 30%;
	    margin-top: 10px;
	    border-width: 1px;
	    border-style: solid;
	    border-color: rgb(255,203,170);
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    border-radius: 30px;
	    border-bottom-right-radius: 30px;
	    border-bottom-left-radius: 30px;
	    border-top-right-radius: 30px;
	    border-top-left-radius: 30px;
	    position: absolute;
	    top: 60%;
	    left: 55%;
	}
	
	.flex {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	}
	
	.iosbomm {
	    padding-bottom: 35rpx;
	    height: 130rpx;
	}
	
	.navbar-view3 {
	    padding-bottom: 40rpx;
	}
	
	.mask {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 0;
	    left: 0;
	    background: #000;
	    z-index: 9000;
	    opacity: 0.7;
	}
	
	.modalDlg {
	    width: 580rpx;
	    height: 400rpx;
	    position: fixed;
	    top: 60%;
	    left: 0;
	    z-index: 9999;
	    margin: -370rpx 85rpx;
	    background-color: #fff;
	    border-radius: 20rpx;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: space-between;
	    overflow: hidden;
	}
	
	.modalDlg>text {
	    font-size: 30rpx;
	    display: flex;
	    flex-direction: row;
	    justify-content: center;
	    align-items: center;
	}
	
	.modalDlg>text:first-child {
	    height: 80rpx;
	    font-weight: 700;
	    width: 100%;
	    border-bottom: 1rpx solid #CCC;
	}
	
	.modalDlg>text:nth-child(2) {
	    height: 100rpx;
	    margin: 0 40rpx;
	}
	
	.modalDlg>view {
	    display: flex;
	    flex-direction: row;
	    justify-content: center;
	    align-items: center;
	}
	
	.modalDlg>view>button {
	    width: 290rpx;
	    height: 80rpx;
	    font-size: 30rpx;
	    border-radius: 0;
	    display: flex;
	    flex-direction: row;
	    justify-content: center;
	    align-items: center;
	    font-weight: bolder;
	    background-color: #fff;
	}
	
	.modalDlg>view>button::after {
	    border-radius: 0;
	}
</style>
